<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>echarts_demo1</title>
    <script src="./echarts.min.js"></script>

</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        width: 100vw;
        height: 100vh;
        
    }
    .app{
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    .app>div{
        width: 100vw;
        height: 50vh;
    }
    .chart{
        box-sizing: border-box;
        padding:10px 50px;
        width: 50%;
        height: 100%;
    }
</style>
<body>
    <div class="app">
        <div style="display: flex;">
            <div class="chart" id="bar"></div>
            <div class="chart" id="line"></div>
    
        </div>
    
        <div style="display: flex;">
            <div class="chart" id="scatter"></div>
            <div class="chart" id="pie"></div>
        </div>
    </div>



    <!-- <input type="file" name="file" id="file"> -->


    <script src="./main.js" type="module"></script>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        // var myChart = echarts.init(document.getElementById('main'));

        // // 指定图表的配置项和数据
        // var option = {
        //     title: {
        //         text: 'ECharts 入门示例'
        //     },
        //     tooltip: {},
        //     legend: {
        //         data: ['销量', '其他']
        //     },
        //     xAxis: {
        //         data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        //     },
        //     yAxis: {},
        //     series: [{
        //         name: '销量',
        //         type: 'bar',
        //         data: [5, 20, 36, 10, 10, 20]
        //     }, {
        //         name: '其他',
        //         type: 'bar',
        //         data: [5, 20, 36, 10, 10, 20]
        //     }]
        // };

        // // 使用刚指定的配置项和数据显示图表。
        // myChart.setOption(option);
    </script>
</body>

</html>